import React, { Component } from 'react';
import { Row, Col, PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
import List from '../../components/List/List';
import styles from './mine.module.css'
import style from '../../components/indexMain/tweetsList/index.module.css'
import MyInput from '../../components/Input/input'
import NewsRecommend from '../../components/newsRecommend/newsRecommend'
import UsersRecommend from '../../components/usersRecommend/usersRecommend'
import Editor from '../../components/editor/editor'
import TweetsList from '../../components/indexMain/tweetsList'
import { post } from '../../utils/post';

const { TabPane } = Tabs;

const renderContent = (state, column = 2) => (
  <Descriptions size="small" column={column}>
    <Descriptions.Item label="用户名">{state.nickname}</Descriptions.Item>
    <Descriptions.Item label="粉丝">
      <a>{0}</a>
    </Descriptions.Item>
    <Descriptions.Item label="">{state.updatedAt?.substring(0,10)}加入</Descriptions.Item>
    <Descriptions.Item label="最后一次上线">{state.updatedAt?.substring(0,10)}</Descriptions.Item>
    <Descriptions.Item label="性别">{state.sex}</Descriptions.Item>
    <Descriptions.Item label="年龄">{state.age}</Descriptions.Item>
    <Descriptions.Item label="出生日期">{state.date}</Descriptions.Item>
    <Descriptions.Item label="邮箱地址">{state.email}</Descriptions.Item>
    <Descriptions.Item label="个人简介">{state.profile}</Descriptions.Item>
  </Descriptions>
);


const extraContent = (
  <div
    style={{
      display: 'flex',
      width: 'max-content',
      justifyContent: 'flex-end',
    }}
  >
  </div>
);

const Content = ({ children, extra }) => (
  <div className="content">
    <div className="main">{children}</div>
    <div className="extra">{extra}</div>
  </div>
);


export default class Mine extends Component {

constructor(props){
    super(props);
    this.state = {
      data: JSON.parse(localStorage.getItem('usersMessage')),
      visible: false, msg:[], userinfo:{}
    }
  }

  setVisible = (e) =>{
    this.setState({
      visible: e
    })
  }
  setEidtor = (e) =>{
    this.setState({
      visible: e
    })
    // setTimeout(function(){location.reload()},1); 
    location.reload()
  }

  async componentDidMount(){
    const ownerInfo  = JSON.parse(localStorage.getItem('usersMessage'))
    const res = await post('/api/ownerMessages',{
        _id:ownerInfo._id
    })
    console.log('这是从后端返回的数据',res);
    this.setState({
        msg:res.data.data.ownerMessages,
        userinfo:res.data.data.userInfo
    })

    // console.log('这是性别',this.state.data.data.sex);
  }

  render() {
      const {msg,userinfo,data}=this.state;
      console.log(userinfo);
      return (
      <div className={styles.content}>
        <div className={styles.row}>
          <Row >
            <Col span={7}>
              <MyInput isRadius={true} delay={1000}></MyInput>
              {/* 需要传 isRadius delay防抖时间 */}
              <NewsRecommend></NewsRecommend>
              <UsersRecommend></UsersRecommend>
            </Col>
            <Col span={12}  >
              <PageHeader
                className="site-page-header-responsive"
                onBack={() => window.history.back()}
                //  用户名  和发推文量
                title={userinfo.nickname}
                subTitle={msg.length}
                extra={[
                  <Button key="1" type="primary" onClick = {() => this.setVisible(true)}>
                    编辑个人资料
                  </Button>,
                ]}
                footer={
                  <Tabs defaultActiveKey="1">
                    <TabPane tab="推文" key="1" >
                    <TweetsList isPerson={true} showImg={true} data={msg} className={style.userTweets}/>
                    </TabPane>
                  
                  </Tabs>
                }
              >
                <Content extra={extraContent}>{renderContent(data)}</Content>
              </PageHeader>
              <Editor isShow={this.state.visible} changShow={(value) => this.setEidtor(value)} ></Editor>
              {/* 这是编辑页 */}
            </Col>



            <Col span={5} ><List /></Col>
          </Row>
        </div>
      </div>
    )
  }
}
